<template>
  <div class="card art-custom-card">
    <div class="card-header">
      <div class="title">
        <h4 class="box-title">订单信息</h4>
      </div>
    </div>
    <ArtTable class="table" :data="props.orderList as any" style="width: 100%" size="large" :border="false"
      :stripe="false" :header-cell-style="{ background: 'transparent' }">
      <template #default>
        <el-table-column label="驾校信息" prop="storeName" />
        <el-table-column label="用户信息">
          <template #default="scope">
            <div style="display: flex; align-items: center">
              <!-- <img class="avatar" :src="scope.row.avatar" alt="avatar" /> -->
              <div>
                <div v-if="scope.row.memberId">ID：{{ scope.row.memberId }}</div>
                <div class="user-name">{{ scope.row.memberName }}</div>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="套餐信息" prop="productName" />
        <el-table-column label="推广佣金" prop="incomeAmount" #default="scope">
          {{ scope.row.incomeAmount ? (Number(scope.row.incomeAmount) /
            100).toFixed(2) : '0' }}
        </el-table-column>
        <el-table-column label="下单时间" prop="createTime" />
      </template>
    </ArtTable>
  </div>
</template>

<script setup lang="ts">

const props = defineProps({
  orderList: {
    type: Array,
    default: () => []
  }
})

</script>

<style lang="scss">
.card {

  // 进度动画
  .el-progress-bar__inner {
    transition: all 1s !important;
  }

  .el-radio-button__original-radio:checked+.el-radio-button__inner {
    color: var(--el-color-primary) !important;
    background: transparent !important;
  }
}
</style>

<style lang="scss" scoped>
.card {
  width: 100%;
  height: 510px;
  overflow: hidden;

  .card-header {
    padding-left: 15px !important;

    .title {
      h4 {
        font-weight: 700 !important;
      }
    }
  }

  :deep(.el-table__body tr:last-child td) {
    border-bottom: none !important;
  }

  .avatar {
    width: 36px;
    height: 36px;
    border-radius: 6px;
    margin-right: 5px;
  }


}
</style>